<template>
	<div class="mod-config">
		<el-dialog
				title="翻译评分表"
				:close-on-click-modal="false"
				:visible.sync="visible"
				width="5000">
			<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
				<el-form-item>
					<el-input v-model="dataForm.key" placeholder="参数名" clearable style="width: 150px"></el-input>
					<el-date-picker
							v-model="dataForm.dateList"
							type="datetimerange"
							:picker-options="pickerOptions"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							align="right"
							value-format="yyyy-MM-dd HH:mm:ss"
							format="yyyy-MM-dd HH:mm:ss"
							style="width: 384px">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button @click="getDataList()">查询</el-button>
					<el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
					<el-button type="primary" @click="Printing()">打印</el-button>
				</el-form-item>
			</el-form>
			<el-table
					:data="dataList"
					border
					v-loading="dataListLoading"
					@selection-change="selectionChangeHandle"
					style="width: 100%;">
				<el-table-column
						type="selection"
						header-align="center"
						align="center"
						width="50">
				</el-table-column>
				<el-table-column
						prop="engine"
						header-align="center"
						align="center"
						label="翻译引擎"
						sortable>
				</el-table-column>
				<el-table-column
						prop="original"
						header-align="center"
						align="center"
						label="原语言"
						sortable>
				</el-table-column>
				<el-table-column
						prop="target"
						header-align="center"
						align="center"
						label="目标语言"
						sortable>
				</el-table-column>
				<el-table-column
						prop="originalenglish"
						header-align="center"
						align="center"
						label="输入翻译语言"
						sortable>
				</el-table-column>
				<el-table-column
						prop="targetenglish"
						header-align="center"
						align="center"
						label="输出翻译语言"
						sortable>
				</el-table-column>
				<el-table-column
						prop="score"
						header-align="center"
						align="center"
						label="评分"
						sortable>
				</el-table-column>
				<el-table-column
						prop="createTime"
						header-align="center"
						align="center"
						label="评分时间"
						sortable>
				</el-table-column>
				<el-table-column
						fixed="right"
						header-align="center"
						align="center"
						width="60"
						label="操作">
					<template slot-scope="scope">
						<!--<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>-->
						<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
					@size-change="sizeChangeHandle"
					@current-change="currentChangeHandle"
					:current-page="pageIndex"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					:total="totalPage"
					layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
			<!-- 弹窗, 新增 / 修改 -->
		</el-dialog>
	</div>
</template>

<script>

	export default {
		data() {
			return {
				visible: false,
				dataForm: {
					key: '',
					dateList: ''
				},
				dataList: [],
				pageIndex: 1,
				pageSize: 10,
				totalPage: 0,
				dataListLoading: false,
				dataListSelections: [],
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
			}
		},
		activated() {
			this.getDataList()
		},
		methods: {
			// 获取数据列表
			getDataList() {
				this.dataForm.startTime = this.dataForm.dateList ? this.dataForm.dateList[0] : undefined
				this.dataForm.endTime = this.dataForm.dateList ? this.dataForm.dateList[1] : undefined
				this.visible = true
				this.dataListLoading = true
				this.$http.get('/trans/list', {
					params: {
						page: this.pageIndex,
						limit: this.pageSize,
						key: this.dataForm.key,
						startTime: this.dataForm.startTime,
						endTime: this.dataForm.endTime
					}
				})
					.then(({data}) => {
						if (data && data.code === 200) {
							this.dataList = data.page.list
							this.totalPage = data.page.totalCount
						} else {
							this.dataList = []
							this.totalPage = 0
						}
					})
				this.dataListLoading = false
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageIndex = 1
				this.getDataList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageIndex = val
				this.getDataList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},
			// 新增 / 修改
			addOrUpdateHandle(id) {
				this.addOrUpdateVisible = true
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(id)
				})
			},
			// 删除
			deleteHandle(id) {
				var ids = id ? [id] : this.dataListSelections.map(item => {
					return item.id
				})
				this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
						this.$http.post('/trans/delete', JSON.stringify(ids))
							.then(({data}) => {
								if (data && data.code === 200) {
									this.$message({
										message: '操作成功',
										type: 'success',
										duration: 1500,
										onClose: () => {
											this.getDataList()
										}
									})
								} else {
									this.$message.error(data.msg)
								}
							})
					}
				)
			},
			// 打印
			Printing(id) {
				// this.traverseData()
				this.handleDownload()
			}
			,
			handleDownload() {
				import('@/vendor/Export2Excel.js').then(excel => {
					const multiHeader =
						[] // 前两行的表头数据，二维数组，不够的用空白补全
					const header = ['翻译引擎', '原语言', '目标语言', '输入翻译语言', '输出翻译语言', '评分', '评分时间'] // 最后一行的表头数据
					const filterVal = ['engine', 'original', 'target', 'originalenglish', 'targetenglish', 'score', 'createTime']
					const list = this.dataListSelections

					const data = this.formatJson(filterVal, list)
					console.log(data, 'list')
					const merges = [] // 合并单元格的数据，如何合并参考上面图片的蓝色背景部分
					excel.export_json_to_excel({
						multiHeader,
						header,
						filename: '翻译评分表',
						merges,
						data
					})
				})
			}
			,
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => {
					return v[j]
				}))
			}
		}
	}
</script>
